$transition-second = .3s

.animation
  transition $transition-second
  &-scale
    transform scale(0)
    &-to
      transform scale(1)
  &-translate-r
    transform translateX(100%)
    &-to
      transform translateX(0)
  &-translate-l
    transition $transition-second
    transform translateX(-100%)
    &-to
      transition $transition-second
      transform translateX(0)
  &-translate-up
    transform translateY(100%)
    &-to
      transform translateY(0)
  &-bounce
    transform: scale(0)
    &-to
      animation: bounce-in 1s;
  &-rotateY
    transform: scale(0) rotateY(0);
    transition: 1s ease-out;
    &-to
      transform: scale(1) rotateY(360deg);
      transition: 1s ease-in;
  

@keyframes bounce-in {
  0% { transform: scale(0) }
  25% { transform: scale(1.2) }
  50% { transform: scale(0.5) }
  75% { transform: scale(1.2) }
  100% { transform: scale(1) }
}


// .page-enter-active, .page-leave-active {
//   transition: opacity .5s
// }
// .page-enter, .page-leave-active {
//   opacity: 0
// }

.bounce-enter-active {
  animation: bounce-in .8s;
}
.bounce-leave-active {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  0% { transform: scale(0) }
  50% { transform: scale(1.5) }
  100% { transform: scale(1) }
}
@keyframes bounce-out {
  0% { transform: scale(1) }
  50% { transform: scale(1.5) }
  100% { transform: scale(0) }
}

.slider-enter-active {
  transition: transform .2s;
}
.slider-leave-active{
  transition: opacity .5s;
}
.slider-enter {
  transform translateX(100%)
}
.slider-leave-active{
  opacity 0
}

.page-enter-active {
  transition: transform .2s;
}
.page-leave-active{
  transition: opacity .5s;
}
.page-enter {
  transform translateX(100%)
}
.page-leave-active{
  opacity 0
}
